റിയാക്റ്റ് useState: സ്റ്റേറ്റ് ഹുക്ക് ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജികളിൽ വൈദഗ്ദ്ധ്യം നേടാം

റിയാക്റ്റിൽ കമ്പോണന്റ് സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു അടിസ്ഥാന ഘടകമാണ് useState ഹുക്ക്. ഇത് ഉപയോഗിക്കാൻ വളരെ എളുപ്പവും വൈവിധ്യമാർന്നതുമാണെങ്കിലും, തെറ്റായ ഉപയോഗം പെർഫോമൻസ് പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം, പ്രത്യേകിച്ചും സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളിൽ. നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നുവെന്നും പരിപാലിക്കാൻ എളുപ്പമാണെന്നും ഉറപ്പാക്കാൻ useState ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള നൂതന തന്ത്രങ്ങൾ ഈ സമഗ്രമായ ഗൈഡ് വിശദീകരിക്കുന്നു.

useState-ഉം അതിൻ്റെ പ്രത്യാഘാതങ്ങളും മനസ്സിലാക്കാം

ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, useState-ന്റെ അടിസ്ഥാനകാര്യങ്ങൾ നമുക്ക് ഓർത്തെടുക്കാം. ഫങ്ഷണൽ കമ്പോണന്റുകൾക്ക് സ്റ്റേറ്റ് നൽകാൻ useState ഹുക്ക് സഹായിക്കുന്നു. ഇത് ഒരു സ്റ്റേറ്റ് വേരിയബിളും അത് അപ്ഡേറ്റ് ചെയ്യാനുള്ള ഒരു ഫംഗ്ഷനും നൽകുന്നു. ഓരോ തവണ സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുമ്പോഴും കമ്പോണന്റ് വീണ്ടും റെൻഡർ ചെയ്യപ്പെടുന്നു (re-render).

അടിസ്ഥാന ഉദാഹരണം:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

export default Counter;

ഈ ലളിതമായ ഉദാഹരണത്തിൽ, "Increment" ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് count സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുകയും, Counter കമ്പോണന്റിന്റെ റീ-റെൻഡറിംഗിന് കാരണമാവുകയും ചെയ്യുന്നു. ചെറിയ കമ്പോണന്റുകളിൽ ഇത് നന്നായി പ്രവർത്തിക്കുമെങ്കിലും, വലിയ ആപ്ലിക്കേഷനുകളിൽ അനിയന്ത്രിതമായ റീ-റെൻഡറുകൾ പ്രകടനത്തെ സാരമായി ബാധിക്കും.

എന്തിന് useState ഒപ്റ്റിമൈസ് ചെയ്യണം?

റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളിലെ പെർഫോമൻസ് പ്രശ്‌നങ്ങൾക്ക് പിന്നിലെ പ്രധാന കാരണം അനാവശ്യമായ റീ-റെൻഡറുകളാണ്. ഓരോ റീ-റെൻഡറും റിസോഴ്‌സുകൾ ഉപയോഗിക്കുകയും ഉപയോക്തൃ അനുഭവം മന്ദഗതിയിലാക്കുകയും ചെയ്യും. useState ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് താഴെ പറയുന്ന കാര്യങ്ങൾക്ക് സഹായിക്കുന്നു:

• അനാവശ്യ റീ-റെൻഡറുകൾ കുറയ്ക്കുക: കമ്പോണന്റുകളുടെ സ്റ്റേറ്റ് യഥാർത്ഥത്തിൽ മാറിയിട്ടില്ലെങ്കിൽ അവ വീണ്ടും റെൻഡർ ചെയ്യുന്നത് തടയുക.
• പെർഫോമൻസ് മെച്ചപ്പെടുത്തുക: നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വേഗതയേറിയതും കൂടുതൽ പ്രതികരണശേഷിയുള്ളതുമാക്കുക.
• പരിപാലനം എളുപ്പമാക്കുക: വൃത്തിയുള്ളതും കാര്യക്ഷമവുമായ കോഡ് എഴുതുക.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 1: ഫങ്ഷണൽ അപ്‌ഡേറ്റുകൾ

മുമ്പത്തെ സ്റ്റേറ്റിനെ അടിസ്ഥാനമാക്കി സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ, എപ്പോഴും setCount-ന്റെ ഫങ്ഷണൽ ഫോം ഉപയോഗിക്കുക. ഇത് സ്റ്റെയിൽ ക്ലോഷറുകളുമായുള്ള (stale closures) പ്രശ്നങ്ങൾ തടയുകയും നിങ്ങൾ ഏറ്റവും പുതിയ സ്റ്റേറ്റിലാണ് പ്രവർത്തിക്കുന്നതെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

തെറ്റായത് (പ്രശ്നമുണ്ടാകാൻ സാധ്യതയുള്ളത്):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(count + 1); // Potentially stale 'count' value
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

ശരിയായത് (ഫങ്ഷണൽ അപ്‌ഡേറ്റ്):

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1); // Ensures correct 'count' value
    }, 1000);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

setCount(prevCount => prevCount + 1) ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങൾ setCount-ലേക്ക് ഒരു ഫംഗ്ഷനാണ് നൽകുന്നത്. റിയാക്റ്റ് ഈ സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ക്യൂ ചെയ്യുകയും ഏറ്റവും പുതിയ സ്റ്റേറ്റ് വാല്യു ഉപയോഗിച്ച് ഫംഗ്ഷൻ എക്സിക്യൂട്ട് ചെയ്യുകയും, സ്റ്റെയിൽ ക്ലോഷർ പ്രശ്നം ഒഴിവാക്കുകയും ചെയ്യും.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 2: ഇമ്മ്യൂട്ടബിൾ സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ

നിങ്ങളുടെ സ്റ്റേറ്റിൽ ഒബ്ജക്റ്റുകളോ അറേകളോ കൈകാര്യം ചെയ്യുമ്പോൾ, അവയെ എപ്പോഴും ഇമ്മ്യൂട്ടബിൾ ആയി അപ്ഡേറ്റ് ചെയ്യുക. സ്റ്റേറ്റിനെ നേരിട്ട് മാറ്റുന്നത് (mutating) ഒരു റീ-റെൻഡറിന് കാരണമാകില്ല, കാരണം മാറ്റങ്ങൾ കണ്ടെത്താൻ റിയാക്റ്റ് റെഫറൻഷ്യൽ ഈക്വാലിറ്റിയെയാണ് (referential equality) ആശ്രയിക്കുന്നത്. പകരം, ആവശ്യമായ മാറ്റങ്ങളോടെ ഒബ്ജക്റ്റിന്റെയോ അറേയുടെയോ ഒരു പുതിയ കോപ്പി ഉണ്ടാക്കുക.

തെറ്റായത് (സ്റ്റേറ്റ് മ്യൂട്ടേറ്റ് ചെയ്യുന്നത്):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    const item = items.find(item => item.id === id);
    if (item) {
      item.quantity = newQuantity; // Direct mutation!  Won't trigger a re-render.
      setItems(items); // This will cause issues because React won't detect a change.
    }
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

ശരിയായത് (ഇമ്മ്യൂട്ടബിൾ അപ്‌ഡേറ്റ്):

function ShoppingCart() {
  const [items, setItems] = useState([{ id: 1, name: 'Apple', quantity: 2 }]);

  const updateQuantity = (id, newQuantity) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, quantity: newQuantity } : item
      )
    );
  };

  return (
    

      {items.map(item => (
        

          {item.name} - Quantity: {item.quantity}
           updateQuantity(item.id, item.quantity + 1)}>Increase
        
      ))}
    
  );
}

ശരിയാക്കിയ പതിപ്പിൽ, അപ്ഡേറ്റ് ചെയ്ത ഐറ്റത്തോടുകൂടിയ ഒരു പുതിയ അറേ ഉണ്ടാക്കാൻ നമ്മൾ .map() ഉപയോഗിക്കുന്നു. നിലവിലുള്ള പ്രോപ്പർട്ടികളുള്ള ഒരു പുതിയ ഒബ്ജക്റ്റ് ഉണ്ടാക്കാൻ സ്പ്രെഡ് ഓപ്പറേറ്റർ (...item) ഉപയോഗിക്കുന്നു, തുടർന്ന് നമ്മൾ quantity പ്രോപ്പർട്ടി പുതിയ വാല്യു ഉപയോഗിച്ച് മാറ്റിയെഴുതുന്നു. ഇത് setItems-ന് ഒരു പുതിയ അറേ ലഭിക്കുന്നുവെന്ന് ഉറപ്പാക്കുകയും, റീ-റെൻഡറിന് കാരണമാവുകയും UI അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നു.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 3: അനാവശ്യ റീ-റെൻഡറുകൾ ഒഴിവാക്കാൻ `useMemo` ഉപയോഗിക്കുന്നത്

useMemo ഹുക്ക് ഒരു കണക്കുകൂട്ടലിന്റെ ഫലം മെമ്മോയിസ് (memoize) ചെയ്യാൻ ഉപയോഗിക്കാം. കണക്കുകൂട്ടൽ ചിലവേറിയതും ചില സ്റ്റേറ്റ് വേരിയബിളുകളെ മാത്രം ആശ്രയിച്ചിരിക്കുന്നതുമാകുമ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്. ആ സ്റ്റേറ്റ് വേരിയബിളുകൾ മാറിയിട്ടില്ലെങ്കിൽ, useMemo കാഷെ ചെയ്ത ഫലം നൽകും, ഇത് കണക്കുകൂട്ടൽ വീണ്ടും പ്രവർത്തിക്കുന്നത് തടയുകയും അനാവശ്യ റീ-റെൻഡറുകൾ ഒഴിവാക്കുകയും ചെയ്യും.

ഉദാഹരണം:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const [multiplier, setMultiplier] = useState(2);

  // Expensive calculation that only depends on 'data'
  const processedData = useMemo(() => {
    console.log('Processing data...');
    // Simulate an expensive operation
    let result = data.map(item => item * multiplier);
    return result;
  }, [data, multiplier]);

  return (
    

      
Processed Data: {processedData.join(', ')}
       setMultiplier(multiplier + 1)}>Increment Multiplier
    
  );
}

function App() {
  const [data, setData] = useState([1, 2, 3, 4, 5]);

  return (
    

      
       setData([6, 7, 8, 9, 10])}>Change Data
    
  );
}

export default App;

ഈ ഉദാഹരണത്തിൽ, data അല്ലെങ്കിൽ multiplier മാറുമ്പോൾ മാത്രമേ processedData വീണ്ടും കണക്കുകൂട്ടുകയുള്ളൂ. ExpensiveComponent-ന്റെ മറ്റ് സ്റ്റേറ്റുകൾ മാറിയാൽ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യും, എന്നാൽ processedData വീണ്ടും കണക്കുകൂട്ടപ്പെടുകയില്ല, ഇത് പ്രോസസ്സിംഗ് സമയം ലാഭിക്കുന്നു.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 4: ഫംഗ്ഷനുകൾ മെമ്മോയിസ് ചെയ്യാൻ `useCallback` ഉപയോഗിക്കുന്നത്

useMemo പോലെ, useCallback ഫംഗ്ഷനുകളെ മെമ്മോയിസ് ചെയ്യുന്നു. ചൈൽഡ് കമ്പോണന്റുകളിലേക്ക് ഫംഗ്ഷനുകൾ പ്രോപ്‌സായി (props) നൽകുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. useCallback ഇല്ലാതെ, ഓരോ റെൻഡറിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് ഉണ്ടാക്കപ്പെടുന്നു, ഇത് പ്രോപ്‌സുകൾ യഥാർത്ഥത്തിൽ മാറിയിട്ടില്ലെങ്കിലും ചൈൽഡ് കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യാൻ കാരണമാകുന്നു. കാരണം, പ്രോപ്‌സുകൾ വ്യത്യസ്തമാണോ എന്ന് റിയാക്റ്റ് പരിശോധിക്കുന്നത് സ്ട്രിക്റ്റ് ഈക്വാലിറ്റി (===) ഉപയോഗിച്ചാണ്, ഒരു പുതിയ ഫംഗ്ഷൻ എപ്പോഴും പഴയതിൽ നിന്ന് വ്യത്യസ്തമായിരിക്കും.

ഉദാഹരണം:

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {
  console.log('Button rendered');
  return {children};
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Memoize the increment function
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Empty dependency array means this function is only created once

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default ParentComponent;

ഈ ഉദാഹരണത്തിൽ, increment ഫംഗ്ഷൻ ശൂന്യമായ ഡിപൻഡൻസി അറേ ഉപയോഗിച്ച് useCallback ഉപയോഗിച്ച് മെമ്മോയിസ് ചെയ്തിരിക്കുന്നു. ഇതിനർത്ഥം കമ്പോണന്റ് മൗണ്ട് ചെയ്യുമ്പോൾ ഈ ഫംഗ്ഷൻ ഒരിക്കൽ മാത്രം ഉണ്ടാക്കപ്പെടുന്നു എന്നാണ്. Button കമ്പോണന്റ് React.memo-യിൽ പൊതിഞ്ഞിരിക്കുന്നതിനാൽ, അതിന്റെ പ്രോപ്‌സുകൾ മാറിയാൽ മാത്രമേ അത് റീ-റെൻഡർ ചെയ്യുകയുള്ളൂ. increment ഫംഗ്ഷൻ ഓരോ റെൻഡറിലും ഒന്നുതന്നെയായതിനാൽ, Button കമ്പോണന്റ് അനാവശ്യമായി റീ-റെൻഡർ ചെയ്യില്ല.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 5: ഫങ്ഷണൽ കമ്പോണന്റുകൾക്കായി `React.memo` ഉപയോഗിക്കുന്നത്

ഫങ്ഷണൽ കമ്പോണന്റുകളെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റാണ് React.memo. ഒരു കമ്പോണന്റിന്റെ പ്രോപ്‌സുകൾ മാറിയിട്ടില്ലെങ്കിൽ അതിനെ റീ-റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് ഇത് തടയുന്നു. പ്രോപ്‌സുകളെ മാത്രം ആശ്രയിക്കുന്ന പ്യുവർ കമ്പോണന്റുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('MyComponent rendered');
  return 
Hello, {name}!
;
});

export default MyComponent;

React.memo ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, നിങ്ങളുടെ കമ്പോണന്റ് പ്യുവർ ആണെന്ന് ഉറപ്പാക്കുക, അതായത് ഒരേ ഇൻപുട്ട് പ്രോപ്‌സുകൾക്ക് എല്ലായ്പ്പോഴും ഒരേ ഔട്ട്പുട്ട് റെൻഡർ ചെയ്യുന്നു. നിങ്ങളുടെ കമ്പോണന്റിന് സൈഡ് എഫക്റ്റുകൾ ഉണ്ടെങ്കിലോ അല്ലെങ്കിൽ മാറിയേക്കാവുന്ന കോൺടെക്സ്റ്റിനെ ആശ്രയിക്കുകയാണെങ്കിലോ, React.memo മികച്ച പരിഹാരമായിരിക്കില്ല.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 6: വലിയ കമ്പോണന്റുകൾ വിഭജിക്കുന്നത്

സങ്കീർണ്ണമായ സ്റ്റേറ്റുകളുള്ള വലിയ കമ്പോണന്റുകൾ പെർഫോമൻസ് പ്രശ്നങ്ങൾക്ക് കാരണമായേക്കാം. ഈ കമ്പോണന്റുകളെ ചെറുതും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ ഭാഗങ്ങളായി വിഭജിക്കുന്നത് റീ-റെൻഡറുകളെ ഒറ്റപ്പെടുത്തി പ്രകടനം മെച്ചപ്പെടുത്താൻ സഹായിക്കും. ആപ്ലിക്കേഷൻ സ്റ്റേറ്റിന്റെ ഒരു ഭാഗം മാറുമ്പോൾ, വലിയ കമ്പോണന്റ് മുഴുവനായി റീ-റെൻഡർ ചെയ്യുന്നതിനുപകരം, ബന്ധപ്പെട്ട സബ്-കമ്പോണന്റ് മാത്രം റീ-റെൻഡർ ചെയ്താൽ മതിയാകും.

ഉദാഹരണം (ആശയം):

യൂസർ വിവരങ്ങളും ആക്റ്റിവിറ്റി ഫീഡും കൈകാര്യം ചെയ്യുന്ന ഒരു വലിയ UserProfile കമ്പോണന്റ് ഉണ്ടാക്കുന്നതിന് പകരം, അതിനെ UserInfo, ActivityFeed എന്നിങ്ങനെ രണ്ട് കമ്പോണന്റുകളായി വിഭജിക്കുക. ഓരോ കമ്പോണന്റും അതിൻ്റേതായ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുകയും അതിൻ്റെ പ്രത്യേക ഡാറ്റ മാറുമ്പോൾ മാത്രം റീ-റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 7: സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക്കിനായി `useReducer`-നൊപ്പം റെഡ്യൂസറുകൾ ഉപയോഗിക്കുന്നത്

സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ട്രാൻസിഷനുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ, useState-ന് ശക്തമായ ഒരു ബദലാണ് useReducer. ഇത് സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യാൻ കൂടുതൽ ഘടനാപരമായ മാർഗ്ഗം നൽകുന്നു, ഇത് പലപ്പോഴും മികച്ച പ്രകടനത്തിലേക്ക് നയിച്ചേക്കാം. useReducer ഹുക്ക് സങ്കീർണ്ണമായ സ്റ്റേറ്റ് ലോജിക്കിനെ കൈകാര്യം ചെയ്യുന്നു, പലപ്പോഴും ഒന്നിലധികം സബ്-വാല്യുക്കളോടൊപ്പം, ആക്ഷനുകളെ അടിസ്ഥാനമാക്കി സൂക്ഷ്മമായ അപ്ഡേറ്റുകൾ ആവശ്യമുള്ളപ്പോൾ ഇത് ഉപയോഗപ്രദമാണ്.

ഉദാഹരണം:

import React, { useReducer } from 'react';

const initialState = { count: 0, theme: 'light' };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'toggleTheme':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    

      
Count: {state.count}
      
Theme: {state.theme}
       dispatch({ type: 'increment' })}>Increment
       dispatch({ type: 'decrement' })}>Decrement
       dispatch({ type: 'toggleTheme' })}>Toggle Theme
    
  );
}

export default Counter;

ഈ ഉദാഹരണത്തിൽ, reducer ഫംഗ്ഷൻ സ്റ്റേറ്റ് അപ്ഡേറ്റ് ചെയ്യുന്ന വിവിധ ആക്ഷനുകളെ കൈകാര്യം ചെയ്യുന്നു. useReducer റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യാനും സഹായിക്കും, കാരണം സ്റ്റേറ്റിന്റെ ഏത് ഭാഗങ്ങളാണ് കമ്പോണന്റുകൾ റെൻഡർ ചെയ്യാൻ കാരണമാകുന്നതെന്ന് മെമ്മോയിസേഷൻ ഉപയോഗിച്ച് നിങ്ങൾക്ക് നിയന്ത്രിക്കാൻ കഴിയും, ഇത് നിരവധി `useState` ഹുക്കുകൾ കാരണമുണ്ടാകാവുന്ന വ്യാപകമായ റീ-റെൻഡറുകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ മികച്ചതാണ്.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 8: സെലക്ടീവ് സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ

ചിലപ്പോൾ, നിങ്ങൾക്ക് ഒന്നിലധികം സ്റ്റേറ്റ് വേരിയബിളുകളുള്ള ഒരു കമ്പോണന്റ് ഉണ്ടായിരിക്കാം, എന്നാൽ അവയിൽ ചിലത് മാറുമ്പോൾ മാത്രമേ റീ-റെൻഡർ ചെയ്യേണ്ടതുള്ളൂ. ഈ സാഹചര്യങ്ങളിൽ, ഒന്നിലധികം useState ഹുക്കുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് സ്റ്റേറ്റ് സെലക്ടീവായി അപ്ഡേറ്റ് ചെയ്യാം. ഇത് യഥാർത്ഥത്തിൽ അപ്ഡേറ്റ് ചെയ്യേണ്ട കമ്പോണന്റിന്റെ ഭാഗങ്ങളിലേക്ക് മാത്രം റീ-റെൻഡറുകളെ പരിമിതപ്പെടുത്താൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം:

import React, { useState } from 'react';

function MyComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [location, setLocation] = useState('New York');

  // Only update location when the location changes
  const handleLocationChange = (newLocation) => {
    setLocation(newLocation);
  };

  return (
    

      
Name: {name}
      
Age: {age}
      
Location: {location}
       handleLocationChange('London')}>Change Location
    
  );
}

export default MyComponent;

ഈ ഉദാഹരണത്തിൽ, location മാറ്റുന്നത് location പ്രദർശിപ്പിക്കുന്ന കമ്പോണന്റിന്റെ ഭാഗം മാത്രം റീ-റെൻഡർ ചെയ്യും. name, age സ്റ്റേറ്റ് വേരിയബിളുകൾ വ്യക്തമായി അപ്ഡേറ്റ് ചെയ്തില്ലെങ്കിൽ കമ്പോണന്റ് റീ-റെൻഡർ ചെയ്യാൻ കാരണമാകില്ല.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 9: ഡീബൗൺസിംഗും ത്രോട്ടിലിംഗും ഉപയോഗിച്ച് സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ നിയന്ത്രിക്കുക

സ്റ്റേറ്റ് അപ്‌ഡേറ്റുകൾ അടിക്കടി സംഭവിക്കുന്ന സാഹചര്യങ്ങളിൽ (ഉദാഹരണത്തിന്, യൂസർ ഇൻപുട്ട് സമയത്ത്), ഡീബൗൺസിംഗും (debouncing) ത്രോട്ടിലിംഗും (throttling) റീ-റെൻഡറുകളുടെ എണ്ണം കുറയ്ക്കാൻ സഹായിക്കും. ഡീബൗൺസിംഗ് ഒരു ഫംഗ്ഷൻ അവസാനമായി വിളിച്ചതിന് ശേഷം ഒരു നിശ്ചിത സമയം കഴിഞ്ഞതിന് ശേഷം മാത്രം ആ ഫംഗ്ഷനെ വിളിക്കുന്നു. ത്രോട്ടിലിംഗ് ഒരു നിശ്ചിത സമയത്തിനുള്ളിൽ ഒരു ഫംഗ്ഷനെ എത്ര തവണ വിളിക്കാമെന്ന് പരിമിതപ്പെടുത്തുന്നു.

ഉദാഹരണം (ഡീബൗൺസിംഗ്):

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce'; // Install lodash: npm install lodash

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSetSearchTerm = useCallback(
    debounce((text) => {
      setSearchTerm(text);
      console.log('Search term updated:', text);
    }, 300),
    []
  );

  const handleInputChange = (event) => {
    debouncedSetSearchTerm(event.target.value);
  };

  return (
    

      
      
Searching for: {searchTerm}
    
  );
}

export default SearchComponent;

ഈ ഉദാഹരണത്തിൽ, Lodash-ൽ നിന്നുള്ള debounce ഫംഗ്ഷൻ setSearchTerm ഫംഗ്ഷൻ കോൾ 300 മില്ലിസെക്കൻഡ് വൈകിപ്പിക്കാൻ ഉപയോഗിക്കുന്നു. ഇത് ഓരോ കീസ്‌ട്രോക്കിലും സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നത് തടയുന്നു, ഇത് റീ-റെൻഡറുകളുടെ എണ്ണം കുറയ്ക്കുന്നു.

ഒപ്റ്റിമൈസേഷൻ സ്ട്രാറ്റജി 10: നോൺ-ബ്ലോക്കിംഗ് UI അപ്‌ഡേറ്റുകൾക്കായി `useTransition` ഉപയോഗിക്കുന്നത്

പ്രധാന ത്രെഡിനെ ബ്ലോക്ക് ചെയ്യുകയും UI ഫ്രീസ് ആക്കുകയും ചെയ്യുന്ന ജോലികൾക്കായി, സ്റ്റേറ്റ് അപ്ഡേറ്റുകളെ അടിയന്തിരമല്ലാത്തതായി അടയാളപ്പെടുത്താൻ useTransition ഹുക്ക് ഉപയോഗിക്കാം. റിയാക്റ്റ് അടിയന്തിരമല്ലാത്ത സ്റ്റേറ്റ് അപ്ഡേറ്റുകൾ പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പ് യൂസർ ഇന്ററാക്ഷനുകൾ പോലുള്ള മറ്റ് ജോലികൾക്ക് മുൻഗണന നൽകും. ഇത് കമ്പ്യൂട്ടേഷണലി ഇന്റെൻസീവ് ഓപ്പറേഷനുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ പോലും സുഗമമായ ഉപയോക്തൃ അനുഭവം നൽകുന്നു.

ഉദാഹരണം:

import React, { useState, useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const loadData = () => {
    startTransition(() => {
      // Simulate loading data from an API
      setTimeout(() => {
        setData([1, 2, 3, 4, 5]);
      }, 1000);
    });
  };

  return (
    

      
        {isPending ? 'Loading...' : 'Load Data'}
      
      {isPending && 
Loading data...
}
      {data.length > 0 && 
Data: {data.join(', ')}
}
    
  );
}

export default MyComponent;

ഈ ഉദാഹരണത്തിൽ, setData കോളിനെ അടിയന്തിരമല്ലാത്തതായി അടയാളപ്പെടുത്താൻ startTransition ഫംഗ്ഷൻ ഉപയോഗിക്കുന്നു. സ്റ്റേറ്റ് അപ്ഡേറ്റ് പ്രോസസ്സ് ചെയ്യുന്നതിന് മുമ്പ്, ലോഡിംഗ് സ്റ്റേറ്റ് പ്രതിഫലിപ്പിക്കാൻ UI അപ്ഡേറ്റ് ചെയ്യുന്നത് പോലുള്ള മറ്റ് ജോലികൾക്ക് റിയാക്റ്റ് മുൻഗണന നൽകും. isPending ഫ്ലാഗ് ട്രാൻസിഷൻ പുരോഗമിക്കുകയാണോ എന്ന് സൂചിപ്പിക്കുന്നു.

വിപുലമായ പരിഗണനകൾ: കോൺടെക്സ്റ്റും ഗ്ലോബൽ സ്റ്റേറ്റ് മാനേജ്മെൻ്റും

പങ്കിട്ട സ്റ്റേറ്റുള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക്, റിയാക്റ്റ് കോൺടെക്സ്റ്റ് അല്ലെങ്കിൽ Redux, Zustand, Jotai പോലുള്ള ഒരു ഗ്ലോബൽ സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലൈബ്രറി ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക. ഈ പരിഹാരങ്ങൾ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനും അനാവശ്യ റീ-റെൻഡറുകൾ തടയുന്നതിനും കൂടുതൽ കാര്യക്ഷമമായ മാർഗ്ഗങ്ങൾ നൽകും, കാരണം കമ്പോണന്റുകൾക്ക് അവയ്ക്ക് ആവശ്യമായ സ്റ്റേറ്റിന്റെ പ്രത്യേക ഭാഗങ്ങളിലേക്ക് മാത്രം സബ്സ്ക്രൈബ് ചെയ്യാൻ സാധിക്കും.

ഉപസംഹാരം

മികച്ച പ്രകടനവും പരിപാലനക്ഷമതയുമുള്ള റിയാക്റ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് useState ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. സ്റ്റേറ്റ് മാനേജ്‌മെന്റിന്റെ സൂക്ഷ്മതകൾ മനസ്സിലാക്കുകയും ഈ ഗൈഡിൽ പറഞ്ഞിട്ടുള്ള ടെക്നിക്കുകൾ പ്രയോഗിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനവും പ്രതികരണശേഷിയും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും. പെർഫോമൻസ് പ്രശ്നങ്ങൾ കണ്ടെത്താൻ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രൊഫൈൽ ചെയ്യാനും നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങൾ തിരഞ്ഞെടുക്കാനും ഓർക്കുക. യഥാർത്ഥ പ്രകടന പ്രശ്നങ്ങൾ തിരിച്ചറിയാതെ അകാലത്തിൽ ഒപ്റ്റിമൈസ് ചെയ്യരുത്. ആദ്യം വൃത്തിയുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ കോഡ് എഴുതുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുക, തുടർന്ന് ആവശ്യാനുസരണം ഒപ്റ്റിമൈസ് ചെയ്യുക. പ്രകടനവും കോഡിന്റെ വായനാക്ഷമതയും തമ്മിൽ ഒരു സന്തുലിതാവസ്ഥ കണ്ടെത്തുക എന്നതാണ് പ്രധാനം.